<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Document</title>
    <link href="../boot/css/bootstrap.min.css" rel="stylesheet">
    <!--核心jquery js-->
    <script src="../boot/js/jquery-3.4.1.min.js"></script>
    <!--bootstrap 核心 js-->
    <script src="../boot/js/bootstrap.min.js"></script>

</head>
<body>


<!--基本实例 btn btn-default btn-primary btn-success btn-info .. -->
<input class="btn btn-default" type="button" value="按钮"><br>
<!--推荐使用button标签构建按钮-->
<button class="btn btn-primary">按钮</button>


<a class="btn btn-success" href="javascript:;" role="button">按钮</a>
<a class="btn btn-info" href="" role="button">按钮</a>
<a class="btn btn-danger" href="" role="button">按钮</a>
<a class="btn btn-warning" href="" role="button">按钮</a>


<!--预定义样式 default primary success info  danger  warning  link-->
<button class="btn btn-link">link</button>


<br>
<br>
<br>
<br>
<!--调整按钮大小 xs sm  md  lg-->

<button class="btn btn-primary btn-xs">xs</button>
<button class="btn btn-default btn-sm">sm</button>
<button class="btn btn-default">default</button>
<button class="btn btn-default btn-lg">lg</button>

<hr>
<!--按钮自适应 btn-block 自适应父容器-->
<div class="container">
    <div class="row">
        <div class="col-sm-2">
            <button class="btn btn-default btn-block">default</button>
        </div>
        <div class="col-sm-2">
            <button class="btn btn-success btn-block">success</button>
        </div>
        <div class="col-sm-2">
            <button class="btn btn-danger btn-block">danger</button>
        </div>
        <div class="col-sm-2">
            <button class="btn btn-info btn-block">info</button>
        </div>
        <div class="col-sm-2">
            <button class="btn btn-warning btn-block">waring</button>
        </div>
        <div class="col-sm-2">
            <button class="btn btn-primary btn-block">paimary</button>
        </div>
        <div class="col-sm-4"></div>
    </div>
</div>

<!--激活状态-->
<button class="btn btn-primary active">3激活按钮</button>
<!--禁用状态-->
<button class="btn btn-primary active" disabled>4激活按钮</button>

</body>
</html>